<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登陆页面</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				margin: 0 auto;
			}
			.top{
				width: 990px;
				margin: 0 auto;
			}
			.top img{
				margin:20px 10px 20px 100px;
				float:left;
				vertical-align: middle;
			}
			.top p{
				font-size: 22px;
				color: #666;
				margin:36px 0px 0px 10px;
				float:left;
			}
			.middle{
				width: 100%;
				background-color: #e93854;
				margin: 0 auto;
			}
			.box .content{
				width: 990px;
				height: 475px;
				background: url(image/banner.png) no-repeat;
				margin: 0 auto;	
			}
			.clearfix:after{
				display: table;
				content: "";
				clear:both;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.login-box{
				width:300px;
				height: 270px;
				background-color: white;
				margin: 30px 100px;
				float: right;
				padding: 28px 20px;
				box-sizing: border-box;
			}
			.login-box p{
				font-size: 18px;
				font-weight: 500;
				color:gray;
				float: left;
			}
			.zhuce a{
				font-size: 14px;
				color:darkred;
				text-decoration: none;
			}
			.zhuce img{
				vertical-align: middle;
			}
			
			.form{
				margin-bottom: 16px ;
			}
			.user,.pwd{
				margin-top: 16px;
				border: 1px solid #bdbdbd;
				height: 38px;
				border-right: none;
			}
			.name input,.pass input{
				margin-top: -1px;
				height: 36px;
				width: 207px;
				outline: none;
				padding-left: 10px;
			}
			::placeholder{
				color:#ccc;
			}
			.zidong{
				font-size: 12px;
				color: #666;
				margin-top: 2px;
				margin-left: 1px;
			}
			.checkbox{
				margin-top: 10px;
			}
			.checkbox span{
				color: #666;
				font-size: 12px;
			}
			.login input{
				margin-top: 10px;
				width:260px;
				height: 38px;
				background-color: #e4393c;
				font-size: 18px;
				color: white;
				border: none;
			}
			.bottom{
				font-size: 12px;
				color:#797979;
				line-height: 24px;
				text-align: center;
				margin-top: 20px;
			}
			.bottom a{
				text-decoration: none;
				color: #999;
				padding: 6px;
			}
			.bottom a:hover{
				color: #f40;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top clearfix">
				<img src="image/logo2.png" />
				<p> 欢迎登录</p>
			</div>
			<div class="middle">
			<div class="content ">
				<div class="login-box">
					<div class="clearfix">
						<p>京东会员</p>
						<div class="zhuce fr">
							<img src="image/icon5.jpg" />
							<a href="#">立即注册</a>
						</div>
					</div>
					<form method="post" action="" id="loginForm">
					<div class="form">
						<div class="user clearfix">
							<div class="img fl"><img src="image/icon1.jpg"></div>
							<div class="name fl"><input type="text" name="user"  placeholder="邮箱/用户名/已验证手机"></div>
						</div>
						<div class="pwd clearfix">
							<div class="img fl"><img src="image/icon2.jpg"></div>
							<div class="pass fl"><input type="text" name="pwd" placeholder="密码" ></div>
						</div>
						<div class="checkbox clearfix">
							<div class="denglu fl"><input type="checkbox" name="denglu"></div>
							<div class="zidong fl">自动登录</div>
							<div class="fr"><span>忘记密码</span></div>
						</div>
						<div class="login">
							<input type="submit" name="user" value="登录">
						</div>
					</div>
					</form>
				</div>
			</div>
			</div>
			<div class="bottom">
				<p>
				<a href="#">关于我们</a>|
				<a href="#">联系我们</a>|
				<a href="#">人才招聘</a>|
				<a href="#">商家入驻</a>|
				<a href="#">广告服务</a>|
				<a href="#">手机京东</a>|
				<a href="#">友情链接</a>|
				<a href="#">销售联盟</a>|
				<a href="#">京东社区</a>|
				<a href="#">京东公益</a>|
				<a href="#">EnglishSite</a>
				</p>
				<p><a href="#">Copyright&copy;2004-2017京东JD.com版权所有</a></p>
			</div>
		</div>
	</body>
</html>
